<template>
    <div class="animated fadeInRight" v-cloak>
        <div class="header h50 bg_red flexbox pl10">
            <p>
              <router-link to="/">
              <i class="iconfont color_fff fs21">&#xe80c;</i>
              </router-link>
            </p>
            <div class="flex_1 pl10">
                <input type="text" id="myInput" name="" class="bg_red wp100 color_fff" placeholder="搜索音乐，歌手，歌词，用户">
            </div>
        </div>
        <div class="h44 tc flexbox flex-center line_bottom list_active">
          <p class="color_666">
            <span class="fs16">歌手分类</span>
            <i class="iconfont">&#xe60a;</i>
          </p>
        </div>
        <p class="fs14 pt20 pl10 mb10">热门搜索</p>
        <ul>
          <li class="fs15 keyword inline-block radius30 mb10 ml10"
          v-for="item in searchWrd" 
          v-text="item"></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'app',
          data(){
            return {
              searchWrd:["陈奕迅","火锅底料","小乔","非酋","鹿晗","王珞丹","亮亮","差不多先生"]
            }
        }
    }
</script>

<style scoped>
    body{
      background: #fff;
    }
   .bg_red{
      background-color: #D43C31;
    }
    #myInput::-webkit-input-placeholder {
      color: #e78279;
    }
    #myInput:-moz-placeholder {
      color: #e78279;
    }
    #myInput:-ms-input-placeholder {
      color: #e78279;
    }
    .keyword{
      padding:4px 12px;
      border:1px solid #ddd;
    }
</style>